<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;">
    <div style="width: 100%;display: flex;background-color: white">

      <el-menu :default-active="curType" mode="horizontal" @select="handleSelect" style="flex: 22">
        <el-menu-item v-for="item in typeList" :key="item" :index="item" style="border-bottom: 1px solid #c5c5c5;">
          <el-text >{{item}}</el-text>
        </el-menu-item>
      </el-menu>
    </div>
  </el-row>
  <el-row style="margin-top: 2%">
    <div style="background-color: rgb(255,251,236);border-radius: 25px;border: none;padding: 10px 10px 10px 10px;width: 100%" >
      <el-text type="warning" size="large">基于本店<el-text type="warning"  style="font-weight: bold;font-size: 20px"> {{curAnalysis.customerTotal}} </el-text>位顾客的消费记录，
        其中<el-text type="warning"  style="font-weight: bold;font-size: 20px"> {{curAnalysis.ownNum}} </el-text>位只在本店买过该类商品，
          <el-text type="warning"  style="font-weight: bold;font-size: 20px"> {{curAnalysis.outsiderNum}} </el-text>位在本店和别的店都买过该类商品</el-text>
    </div>

  </el-row>
  <div style="margin-top: 1%;background-color: white" v-loading="isLoading">
    <el-text style="padding-left: 1%;">你的顾客在别的店买过这些，价格可能不同:</el-text>
    <el-table :data="curGoodsList"
              height="70vh"
              style="width: 100%;"
              :show-header="false"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="商品名" width="300">
        <template #default="scope">
          <el-row align='middle'>
            <el-col span="5">
              <el-image :src="scope.row.image" style="height: 70px;">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </el-col>
            <el-col span="19" style="padding-left: 5%;">
              <el-row style="max-width: 145px"><el-text>{{ scope.row.goodsName }}</el-text></el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-text><el-text type="warning" size="large">{{scope.row.outsiderNum}}</el-text>人在别的店买过</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button round @click="showUpdate(scope.row)">改价</el-button>
        </template>
      </el-table-column>
      <el-table-column></el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="isUpdate" title="更改价格" width="20%" center>
    <el-form>
      <el-form-item label="价格" label-width="100px" >
        <el-row justify="space-evenly" style="justify-content: center;align-items:center;">
          <el-col :span="12">
            <el-input v-model="goodsInfoTemp.price" min="0" type="number" style="max-width: 90px" />
          </el-col>
          <el-col :span="12">
            <el-button style="margin-left: 5%" type="primary" plain @click="getSuggestedPrice">建议价</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15%">
          <el-button  style="margin-left: 5%;" @click="updatePrice">更改</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {store} from "@/store";
import {ElMessage} from "element-plus";

let typeList=ref([])
const curType=ref("")
let analysisMap=ref({})
let curAnalysis=ref({})
let curGoodsList=ref([])
let isUpdate=ref(false)
const goodsInfoTemp=ref({})
let isLoading=ref(false)
onMounted(()=>{
  isLoading.value=true
  request.post("/business/get/CustomerPurchasedAnalysis",{storeId:store.getLocalCurrentStoreMain().storeId}).then(res=>{
    console.log(res.data)
    typeList.value=Object.keys(res.data)
    analysisMap.value=res.data

    handleSelect(typeList.value[0])
    isLoading.value=false
  })
})
const handleSelect = (key) => {
  curType.value=key
  curAnalysis.value=analysisMap.value[key]
  curGoodsList.value=Object.values(curAnalysis.value.analysisBoMap)
}
const showUpdate = (data) =>{
  goodsInfoTemp.value=data
  isUpdate.value=true
}
const updatePrice = () => {
  request.post("/goods/update/goodsStore",[goodsInfoTemp.value]).then(res=>{
    request.post("/business/get/CustomerPurchasedAnalysis",{storeId:store.getLocalCurrentStoreMain().storeId}).then(res=>{
      analysisMap.value=res.data
      handleSelect(curType.value)
    })
    request.get("/goods/get/goodsCodeList/"+store.getLocalCurrentStoreMain().storeId).then(res1=>{
      for (let i in res1.data){
        localStorage.removeItem(res1.data[i])
      }
      request.get("/goods/get/goodsInfo/"+store.getLocalCurrentStoreMain().storeId).then(res2=>{
        for (let i in res2.data){
          store.setLocalStorage(res2.data[i].code,res2.data[i])
        }
        store.resetStoreGoodsInfo()
        console.log("resetLocalGoodsInfo done")
        store.goodsStoreInfoList=[]
        for (let i in res1.data){
          store.goodsStoreInfoList.push(store.getLocalStorage(res1.data[i]))
        }
      })
    })
    isUpdate.value=false
    ElMessage({
      message: '已更改价格',
      type: 'success',
    })
  })
}
const getSuggestedPrice = () => {
  request.get("/goods/get/suggestedPrice/"+goodsInfoTemp.value.code).then(res=>{
    if (res.data!==null)
      goodsInfoTemp.value.price=res.data
    else
      ElMessage({
        message: "没有此商品的建议价",
        type: 'warning',
      })
  })
}
</script>

<style scoped>
.el-menu-item.is-active {
  color: rgb(46, 126, 226) !important;
  font-weight: bold;
  border-bottom: 2px solid rgb(255, 181, 1);

}
</style>